<template>
  <Transition name="slide-left">
    <div v-if="showDetails" class="details">
      <PageHead
        :border-bottom="false"
        :background="pageHead.background"
        :title="pageHead.title"
        @back="showDetails = false"
        @more="showMomentForm = true"
      >
        <img width="24" :src="xj" />
      </PageHead>
      <div ref="target" class="banner">
        <div class="banner-image">
          <img :src="banner" />
        </div>
        <div class="avatar flex">
          <div class="text-16 text-white mt-4 mr-8">
            {{ store.master.username }}
          </div>
          <img :src="getAvatar()" width="48" height="48" />
        </div>
      </div>

      <div class="moments flex-1">
        <div v-if="list.length > 0" class="flex flex-col gr-8">
          <div v-for="(item, key) in list" :key="key" class="card">
            <div class="flex gc-4 px-16 moment-content">
              <img :src="item.avatar" height="32" width="32" />
              <div class="flex flex-col gr-4 flex-1">
                <div class="name">{{ item.username }}1</div>
                <div class="text-222">
                  <div> {{ item.content }}</div>
                  <template v-if="item.imageList.length > 3">
                    <ul class="image-list mt-8">
                      <li
                        v-for="(m, n) in item.imageList"
                        :key="n"
                        class="flex"
                      >
                        <img :src="m" class="w-100" />
                      </li>
                    </ul>
                  </template>
                  <template v-else>
                    <div class="flex images">
                      <div
                        v-for="(m, n) in item.imageList"
                        :key="n"
                        class="mt-8 flex-1"
                      >
                        <img :src="m" />
                      </div>
                    </div>
                  </template>
                </div>
                <div class="flex justify-between align-center">
                  <div class="flex gc-4">
                    <div class="text-666">{{ item.createTime }}</div>
                    <div
                      v-if="item.from === 1"
                      class="text-blue"
                      @click="deleteMoment(item.id)"
                    >
                      <img :src="deletePng" width="16" />
                    </div>
                  </div>
                  <img :src="morePng" width="24" />
                </div>
                <div
                  v-if="item.reviewer.length > 0"
                  class="reviewer flex gc-2 flex-col px-8 py-2"
                >
                  <div class="flex">
                    <div>
                      <img :src="heartPng" width="24" height="24" />
                    </div>
                    <div>
                      <div class="reviewer-name"> {{ item.reviewer }} </div>
                    </div>
                  </div>

                  <ul v-if="item.commentList.length > 0">
                    <div class="love"></div>
                    <li class="flex gc-4">
                      <div> <span class="reviewer-name">NAME</span>: </div>
                      <div style="line-height: 24px">MESSAGE</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-999"> 这里空空如也 </div>
      </div>
      <MomentForm></MomentForm>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import { getAvatar, getUserStore } from '@/store/user/utils';
  import { useIntersectionObserver } from '@vueuse/core';
  import { computed, ref } from 'vue';
  import { notify } from '@/views/components/notify/notify';
  import { showLoading } from '@/views/components/loading/loading';
  import xj from '../assets/xj.png';
  import banner from '../assets/banner.webp';
  import heartPng from '../assets/heart.png';
  import { showDetails } from './details';
  import morePng from '../assets/more.png';
  import deletePng from '../assets/delete.png';
  import MomentForm from '../moment-form/MomentForm.vue';
  import { showMomentForm } from '../moment-form/monent-form';

  const store = getUserStore();
  const target = ref();
  const pageHead = ref({
    title: '',
    background: 'transparent',
  });
  useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
    if (isIntersecting) {
      pageHead.value = {
        title: '',
        background: 'transparent',
      };
    } else {
      pageHead.value = {
        title: '朋友圈',
        background: '#f5f2f3',
      };
    }
  });
  const deleteMoment = (id: string) => {
    notify({
      title: '提示',
      content: '确定删除这条动态吗？',
      type: 'warning',
      show: true,
      textAlign: 'center',
      onConfirm: () => {
        store.moments = store.moments.filter((item: any) => item.id !== id);
        showLoading({ type: 'feedback', text: '删除成功' });
      },
    });
  };
  const list = computed(() => {
    return getUserStore().moments;
  });
</script>

<style lang="scss" scoped>
  @import './details.scss';
</style>
